'use client'

import { Suspense } from 'react'
import OcrDashboard from '@/components/OcrDashboard'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export default function OcrRecordsPage() {
  return (
    <div className="container mx-auto py-6">
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">OCR识别记录</h1>
            <p className="text-muted-foreground">
              查看和管理所有OCR识别历史记录
            </p>
          </div>
        </div>
        
        <Suspense 
          fallback={
            <Card>
              <CardHeader>
                <CardTitle>加载中...</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="h-4 bg-muted rounded animate-pulse" />
                  <div className="h-4 bg-muted rounded animate-pulse w-3/4" />
                  <div className="h-4 bg-muted rounded animate-pulse w-1/2" />
                </div>
              </CardContent>
            </Card>
          }
        >
          <OcrDashboard />
        </Suspense>
      </div>
    </div>
  )
}